import { Canvas, Meta, Source } from '@storybook/blocks'

import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
import * as MenubarStories from './menubar.stories'

<Meta of={MenubarStories} />

<RadixPrimitiveDocsButton name='menubar' />

# Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

## Preview

<Canvas of={MenubarStories.Default} />

## Usage

export const importCode = `import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@orbitkit/ui/menubar";`

export const usageCode = `<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>New Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Share</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>`

<Source code={importCode} language='ts' dark />
<Source code={usageCode} language='tsx' dark />
